<template>
  <div id="vipIndex">
    <c-title :hide="false" text="VIP"></c-title>
    <div class="headtop" v-if="userInfo.member">
      <div class="img">
        <img :src="userInfo.member.avatar" alt="" />
      </div>
      <div class="user">
        <div class="name">{{ userInfo.member.nickname }}</div>
        <div class="time" v-if="datainfo.has_one_vip">
          有效期：{{ datainfo.has_one_vip.end_time_str }}
        </div>
      </div>
      <div
        class="typeBtn"
        v-if="datainfo.has_one_vip && (datainfo.has_one_vip.status == '-1' || datainfo.has_one_vip.status == '1')"
        @click="renewTap"
      >
        续费
      </div>
      <div
        class="typeBtn"
        v-if=" datainfo.has_one_vip && (datainfo.has_one_vip.status == '-2' || datainfo.has_one_vip.status == '-3')"
        @click="applyTap"
      >
        申请
      </div>
    </div>
    <div class="detailBox">
      <div class="account">
        <div class="accountLeft">{{plugin_setting?plugin_setting.common_credit_name:'消费账户'}}：</div>
        <div class="accountRight">￥{{ datainfo.common_credit }}</div>
      </div>
      <div class="accountDetail">
        <div class="accountDetailL">
          <div class="text">{{ userInfo.order_count }}</div>
          <div class="txt">已完成订单数</div>
        </div>
        <div class="accountDetailL">
          <div class="text">￥{{ userInfo.order_price }}</div>
          <div class="txt">累计订单金额</div>
        </div>
      </div>
    </div>
    <div class="removeBox" v-if="datainfo.has_one_vip && datainfo.has_one_vip.status != '-2' && datainfo.has_one_vip.status != '-3'">
      <div class="toptxt">联名消费的债权人</div>
      <div class="removelist" v-if="datainfo.has_one_owner_member">
        <div class="removelis">
          <div class="img">
            <img :src="datainfo.has_one_owner_member.avatar" alt="" />
          </div>
          <div class="user">
            <div class="name">{{ datainfo.has_one_owner_member.nickname }}</div>
            <div class="time">化债期：{{ datainfo.end_time_str }}</div>
          </div>
          <!-- v-if="datainfo.bind_cancel_status" -->
          <div class="removeBtnSHZ" v-if="datainfo.bind_cancel_status == 1" >解绑审核中</div>
          <div class="removeBtn" v-else @click="removeTap" >解绑</div>
        </div>
      </div>
      <div class="toptxt" v-if="datainfo.has_one_debtor_member">联名消费的债务人</div>
      <div class="removelist debt" v-if="datainfo.has_one_debtor_member">
        <div class="removelis">
          <div class="img">
            <img :src="datainfo.has_one_debtor_member.avatar" alt="" />
          </div>
          <div class="user">
            <div class="name">
              {{ datainfo.has_one_debtor.name }}
            </div>
            <div class="time">化债期：{{ datainfo.end_time_str }}</div>
          </div>
          <div
            class="removeBtn"
            v-if="datainfo.is_expire == '0' && datainfo.status == 1"
            @click="toShop"
          >
            进店
          </div>
        </div>
      </div>
    </div>
    <div class="bottomBox">
      <div class="bottomList" @click="toOrder">
        <i class="iconfont icon-fontclass-shangpindingdan"></i>
        <div class="txt">订单管理</div>
      </div>
      <div class="bottomList" @click="toDetail">
        <i class="iconfont icon-fontclass-wenzhangzhongxin"></i>
        <div class="txt">提货券明细</div>
      </div>
      <div class="bottomList" @click="toBindDetail">
        <i class="iconfont icon-massage_order"></i>
        <div class="txt">绑定记录</div>
      </div>
    </div>
    <van-popup
      v-model="RenewShow"
      position="bottom"
      :style="{ height: '15.36rem', borderRadius: '0.31rem 0.31rem 0rem 0rem' }"
      closeable
    >
      <div class="shopShowTxt">续费</div>
      <div class="flexCell">
        <div>当前拥有商品数量：{{ vip_goods_count }}</div>
        <div class="right">
          <div class="pay" @click="goGoods">
            购买商品
            <i class="iconfont icon-member_right"></i>
          </div>
        </div>
      </div>
      <div class="flexCell">
        <div>充值数量</div>
        <div class="right">
          <van-stepper
            class="pay"
            v-model="goodsTotal"
            theme="round"
            button-size="22"
          />
        </div>
      </div>
      <div class="btn" @click="renewPost">续费</div>
    </van-popup>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      userInfo: [],
      RenewShow: false,
      datainfo: [],
      renewUserId: "",
      goodsTotal: 1,
      vip_goods_count: "",
      vip_goods_id: "",
      plugin_setting:{},
    };
  },
  activated() {
    this.RenewShow = false;
    this.getData();
    this.getUser();
    this.plugin_setting = JSON.parse(localStorage.getItem("plugin_setting")).debt_shop;
  },
  methods: {
    goGoods(){
      this.$router.push(this.fun.getUrl("goods", { id: this.vip_goods_id }));
    },
    renewTap() {
      this.RenewShow = true;
      this.renewUserId = this.datainfo.vip_id;
      this.getGoodsCount();
    },
    applyTap(){
      this.$router.push(this.fun.getUrl("debtapply", { type: 3 }));
    },
    getGoodsCount() {
      $http
        .post("plugin.debt-shop.frontend.debt-member.applyData", "加载中")
        .then((response) => {
          if (response.result === 1) {
            this.vip_goods_id = response.data.vip_goods_id;
            this.vip_goods_count = response.data.vip_goods_count;
          } else {
            Toast(response.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    renewPost() {
      if (this.goodsTotal > this.vip_goods_count) {
        Toast("拥有商品数量不足");
        return;
      }
      let json = {
        id: this.renewUserId,
        count: this.goodsTotal,
      };
      let urlStr =
        "plugin.debt-shop.frontend.debt-member.rechargeDebtMemberTime";
      $http
        .post(urlStr, json, "加载中")
        .then((response) => {
          if (response.result === 1) {
            this.RenewShow = false;
            this.$dialog.alert({ message: response.msg }).then(() => {
              this.getData();
              this.getUser();
            });
          } else {
            Toast(response.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    toOrder() {
      this.$router.push(
        this.fun.getUrl("debtOrder", { status: 0, member_type: 3 })
      );
    },
    toDetail() {
      this.$router.push(this.fun.getUrl("purchaseDetailsVip", { vip: true }));
    },
    toBindDetail() {
      this.$router.push(this.fun.getUrl("vipBindRecord", {}));
    },
    removeTap() {
      this.$dialog
        .confirm({
          message: "是否确认解除绑定",
        })
        .then(() => {
          this.removePost();
        })
        .catch(() => {
          // 取消
        });
    },
    removePost() {
      $http
        .post("plugin.debt-shop.frontend.apply.deleteBindApply", {}, "加载中")
        .then((response) => {
          if (response.result === 1) {
            Toast(response.msg);
            this.getData();
            this.getUser();
          } else {
            Toast(response.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    toShop() {
      this.$router.push(
        this.fun.getUrl("debtorShop", {
          kid: this.datainfo.debtor_id,
          member_type: 3,
        })
      );
    },
    getData() {
      $http
        .get("plugin.debt-shop.frontend.vip.baseData", {}, "加载中")
        .then((response) => {
          if (response.result === 1) {
            this.datainfo = response.data;
          } else {
            Toast(response.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getUser() {
      $http
        .get(
          "plugin.debt-shop.frontend.debt-member.getDebtData",
          { member_type: 3 },
          "加载中"
        )
        .then((response) => {
          if (response.result === 1) {
            this.userInfo = response.data;
          } else {
            Toast(response.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
#vipIndex {
  min-height: 100vh;

  .bottomBox {
    margin-top: 0.63rem;
    background: #fff;
    display: flex;
    justify-content: flex-start;
    padding-top: 0.78rem;
    height: 50.5vh;

    .bottomList {
      width: 25%;

      .iconfont {
        font-size: 2rem;
      }

      .icon-fontclass-shangpindingdan {
        color: #25a8ff;
      }

      .icon-fontclass-wenzhangzhongxin {
        color: #ff9620;
      }

      .icon-massage_order {
        color: #835fe5;
      }

      .txt {
        margin-top: 0.45rem;
      }
    }
  }

  .removeBtnSHZ {
    height: 1.44rem;
    background-color: #999;
    border-radius: 0.72rem;
    font-size: 0.63rem;
    color: #fff;
    padding: 0 0.65rem;
    line-height: 1.44rem;
  }

  .removeBox {
    margin: 0.63rem 0 0 0;
    padding: 0.91rem 0.94rem 0 0.94rem;
    background: #fff;

    .removelist {
      display: flex;
      flex-direction: column;
      padding: 1.2rem 0 0 0;

      .removelis {
        display: flex;
        padding-bottom: 1.5rem;
        align-items: center;

        .removeBtn {
          width: 3.13rem;
          height: 1.44rem;
          background-color: #f15353;
          border-radius: 0.72rem;
          font-size: 0.63rem;
          color: #fff;
          line-height: 1.44rem;
        }

        .user {
          flex: 1;
          height: 2.5rem;
          margin-left: 0.53rem;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-between;
          overflow: hidden;

          .name {
            width: 100%;
            font-size: 0.88rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            text-align: left;
          }

          .time {
            font-size: 0.63rem;
            color: #7e7e7e;
          }
        }

        .img {
          width: 2.5rem;
          height: 2.5rem;
          background-color: #b6b6b6;
          border-radius: 100%;

          img {
            width: 100%;
            height: 100%;
            border-radius: 100%;
          }
        }
      }
    }

    .toptxt {
      text-align: left;
      font-size: 0.75rem;
      color: #2f2f2f;
      font-weight: bold;
    }
  }

  .detailBox {
    padding: 0.94rem 0.94rem 0 0.94rem;
    background: #fff;

    .accountDetail {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.91rem 0;

      .accountDetailL {
        flex: 1;

        .text {
          font-size: 1rem;
          color: #202020;
          text-align: center;
        }

        .txt {
          color: #797979;
          opacity: 0.8;
          font-size: 0.75rem;
          text-align: center;
          margin-top: 0.33rem;
        }
      }
    }

    .account {
      height: 2.78rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 0.03rem solid #f3f3f3;
      font-size: 0.94rem;

      .accountRight {
        flex: 1;
        text-align: right;
      }
    }
  }

  .headtop {
    height: 6.25rem;
    background-color: #fd3a3a;
    padding: 0 0.94rem;
    background-image: url("../../assets/images/debt/VIPbg.png");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;

    .user {
      display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: center;
      align-items: flex-start;
      margin-left: 0.66rem;
      color: #fff;

      .time {
        font-size: 0.69rem;
        color: #fff;
        opacity: 0.7;
      }

      .name {
        margin-bottom: 0.38rem;
        font-size: 1.06rem;
      }
    }

    .typeBtn {
      width: 4.38rem;
      height: 1.88rem;
      background-image:
        linear-gradient(#fff, #fff),
        linear-gradient(#000, #000);
      background-blend-mode: normal, normal;
      border-radius: 0.94rem;
      font-size: 0.81rem;
      color: #fd3a3a;
      text-align: center;
      line-height: 1.88rem;
    }

    .img {
      width: 3.56rem;
      border-radius: 100%;
      height: 3.56rem;
      background-color: #fff;

      img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
      }
    }
  }
}

.shopShowTxt {
  width: 100%;
  text-align: center;
  font-size: 1.06rem;
  color: #202020;
  padding-top: 0.97rem;
  margin-bottom: 2rem;
}

.flexCell {
  padding: 0 0.91rem 0 1.06rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.94rem;

  .right {
    display: flex;
    align-items: center;

    .pay {
      display: flex;
      align-items: center;
      font-size: 0.75rem;
      color: #f14e4e;
    }
  }
}

.btn {
  margin: 0 auto;
  width: 20.31rem;
  height: 2.5rem;
  background-color: #f15353;
  border-radius: 1.25rem;
  font-size: 0.88rem;
  color: #fff;
  text-align: center;
  line-height: 2.5rem;
}
</style>
